<template>
  <div class="page-wrapper">
    <c-card title="设备列表" class="user-list">
      <el-button slot="func" type="primary" size="small" class="item" @click="showAddDlg">添加设备</el-button>
      <div class="search-row">
        <div>
          <div class="item">
            <label>设备类别</label>
            <el-select v-model="devType" size="small" @click="searchTypeChange">
              <el-option v-for="(t, i) in devTypes" :key="i + 1" :label="t" :value="t"></el-option>
            </el-select>
          </div>
          <div class="item">
            <label>客户</label>
            <el-select v-model="clientId" filterable clearable size="small" @change="_getStations">
              <el-option v-for="s in comList" :key="s.pkid" :label="s.name" :value="s.pkid"></el-option>
            </el-select>
          </div>
          <div class="item">
            <label>站点</label>
            <el-select
              v-model="substationId"
              filterable
              clearable
              size="small"
              @change="_getDevices"
            >
              <el-option v-for="s in searchStations" :key="s.pkid" :label="s.name" :value="s.pkid"></el-option>
            </el-select>
          </div>
          <!-- <c-search
            v-model="searchText"
            :height="32"
            :width="200"
            placeholder="设备名称"
            class="item"
            @submit="_getDevices"
          />-->
        </div>
      </div>
      <el-table ref="table" v-loading="loading" :data="devices" style="width: 100%">
        <el-table-column prop="model" label="设备编号" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.baseInfo.leaveCode }}</template>
        </el-table-column>
        <el-table-column prop="modelCode" label="设备型号" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.baseInfo.modelCode }}</template>
        </el-table-column>
        <el-table-column prop="brandInfo" label="生产商" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.baseInfo.makerName }}</template>
        </el-table-column>
        <el-table-column prop="devCode" label="出厂日期" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.baseInfo.leaveDate }}</template>
        </el-table-column>
        <el-table-column prop="clientId" label="产权单位" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.baseInfo.clientName }}</template>
        </el-table-column>
        <el-table-column prop="devStatus" label="所属站点">
          <template v-slot="{row}">{{ row.baseInfo.substationName }}</template>
        </el-table-column>
        <el-table-column prop="devStatus" label="位置分布">
          <template v-slot="{row}">{{ row.baseInfo.locNumber }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="text" @click="showEditDlg(row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteDev(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getDevices"
        ></el-pagination>
      </div>
    </c-card>
    <c-dlg :title="(device.pkid ? '编辑' : '添加') + '设备'" :visible.sync="dialogVisible">
      <el-form
        ref="form"
        :model="device"
        :rules="rules"
        label-width="60px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div>
          <h3>设备属性</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备分类" prop="baseInfo.typeId">
                <el-select v-model="device.baseInfo.typeId" size="small" @change="typeChange">
                  <el-option v-for="t in curTypes" :key="t.pkid" :value="t.pkid" :label="t.twoType"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="电压(kV)" prop="baseInfo.volType">
                <el-input v-model="device.baseInfo.volType" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="设备型号" prop="baseInfo.modelCode">
                <el-input v-model="device.baseInfo.modelCode" size="small"></el-input>
              </el-form-item>
            </div>
          </div>
          <template v-if="device.baseInfo.typeId">
            <!-- 高压系统 -->
            <template v-if="device.baseInfo.typeId <= 11 && device.highVol">
              <!-- 高压开关 -->
              <template v-if="device.baseInfo.typeId === 1">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定电流(A)" prop="rCurrent">
                      <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="安装方式" prop="installModel">
                      <el-select v-model="device.highVol.installModel" size="small">
                        <el-option
                          v-for="(v, i) in installModels"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压电流互感器 -->
              <template v-else-if="device.baseInfo.typeId === 2">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="绝缘介质" prop="insulateMedium">
                      <el-select v-model="device.baseInfo.insulateMedium" size="small">
                        <el-option
                          v-for="(v, i) in insulateMediums"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定电流比" prop="rrCurrent">
                      <el-input v-model="device.highVol.rrCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定频率(Hz)" prop="rFrequency">
                      <el-input v-model="device.baseInfo.rFrequency" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定输出(VA)" prop="rOutput">
                      <el-input v-model="device.highVol.rOutput" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="准确级" prop="aLevel">
                      <el-input v-model="device.highVol.aLevel" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="短时热电流(kA)" prop="sthCurrent">
                      <el-input v-model="device.highVol.sthCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定动稳定电流(kV)" prop="rdwCurrent">
                      <el-input v-model="device.highVol.rdwCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 高压隔离开关 -->
              <template v-else-if="device.baseInfo.typeId === 3">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电流(A)" prop="rCurrent">
                      <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="热稳定电流(kA)" prop="tsCurrent">
                      <el-input v-model="device.highVol.tsCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压负荷开关（SF6） -->
              <template v-else-if="device.baseInfo.typeId === 4">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="绝缘介质" prop="insulateMedium">
                      <el-select v-model="device.baseInfo.insulateMedium" size="small">
                        <el-option
                          v-for="(v, i) in insulateMediums"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定电流(A)" prop="rCurrent">
                      <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定短路开断电流(kA)" prop="buCurrent">
                      <el-input v-model="device.highVol.buCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压断路器 -->
              <template v-else-if="device.baseInfo.typeId === 5">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="断路器类型" prop="installModel">
                      <el-select v-model="device.highVol.installModel" size="small">
                        <el-option
                          v-for="(v, i) in installModels"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="绝缘介质" prop="insulateMedium">
                      <el-select v-model="device.baseInfo.insulateMedium" size="small">
                        <el-option
                          v-for="(v, i) in insulateMediums"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定频率(Hz)" prop="rFrequency">
                      <el-input v-model="device.baseInfo.rFrequency" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电流(A)" prop="rCurrent">
                      <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定短路开断电流(kA)" prop="buCurrent">
                      <el-input v-model="device.highVol.buCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定短路持续时间(s)" prop="scdTime">
                      <el-input v-model="device.highVol.scdTime" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="操作电压(V)" prop="oVoltage">
                      <el-input v-model="device.highVol.oVoltage1" size="small"></el-input>
                      <div style="margin-left: 20px">
                        <el-radio v-model="device.highVol.oVolType" label="AC">交流</el-radio>
                        <el-radio v-model="device.highVol.oVolType" label="DC">直流</el-radio>
                      </div>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="电机电压(V)" prop="pmVoltage">
                      <el-input v-model="device.highVol.pmVoltage1" size="small"></el-input>
                      <div style="margin-left: 20px">
                        <el-radio v-model="device.highVol.pmVoltageType" label="AC">交流</el-radio>
                        <el-radio v-model="device.highVol.pmVoltageType" label="DC">直流</el-radio>
                      </div>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压熔断器 -->
              <template v-else-if="device.baseInfo.typeId === 6">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="熔断电流(A)" prop="rCurrent">
                      <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 高压接地开关 -->
              <template v-else-if="device.baseInfo.typeId === 7">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定短时耐受电流Icw(kA)" prop="rstCurrent">
                      <el-input v-model="device.highVol.rstCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定短路持续时间(s)" prop="scdTime">
                      <el-input v-model="device.highVol.scdTime" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压避雷器 -->
              <template v-else-if="device.baseInfo.typeId === 8">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压(V)" prop="rVoltage">
                      <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压电压互感器[PT] -->
              <template v-else-if="device.baseInfo.typeId === 9">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="使用条件" prop="envCondition">
                      <el-select v-model="device.baseInfo.envCondition" size="small">
                        <el-option
                          v-for="(v, i) in envConditions"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="绝缘介质" prop="insulateMedium">
                      <el-select v-model="device.baseInfo.insulateMedium" size="small">
                        <el-option
                          v-for="(v, i) in insulateMediums"
                          :key="i"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定电压比(V)" prop="rrVoltage">
                      <el-input v-model="device.highVol.rrVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定频率(Hz)" prop="rFrequency">
                      <el-input v-model="device.baseInfo.rFrequency" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定输出(VA)" prop="rOutput">
                      <el-input v-model="device.highVol.rOutput" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="准确级" prop="aLevel">
                      <el-input v-model="device.highVol.aLevel" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 高压综合保护 -->
              <template v-else-if="device.baseInfo.typeId === 10">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="操作电压(V)" prop="oVoltage">
                      <el-input v-model="device.highVol.oVoltage1" size="small"></el-input>
                      <div style="margin-left: 20px">
                        <el-radio v-model="device.highVol.oVolType" label="AC">交流</el-radio>
                        <el-radio v-model="device.highVol.oVolType" label="DC">直流</el-radio>
                      </div>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 高压保护继电器 -->
              <template v-else-if="device.baseInfo.typeId === 11">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定交流电流(A)" prop="racCurrent">
                      <el-input v-model="device.highVol.racCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
            </template>
            <!-- 低压系统 -->
            <template v-else-if="device.baseInfo.typeId > 11 && device.lowVol">
              <div class="form-row">
                <div class="row-item">
                  <el-form-item label="额定电压(V)" prop="rVoltage">
                    <el-input v-model="device.baseInfo.rVoltage" size="small"></el-input>
                  </el-form-item>
                </div>
                <spliter />
                <div class="row-item">
                  <el-form-item label="额定电流(A)" prop="rCurrent">
                    <el-input v-model="device.baseInfo.rCurrent" size="small"></el-input>
                  </el-form-item>
                </div>
                <spliter />
                <div class="row-item"></div>
              </div>
              <!-- 万能式低压断路器 -->
              <template v-if="device.baseInfo.typeId === 12">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定极限分断能力Icu(kA)" prop="rlmtbrkCapacity">
                      <el-input v-model="device.lowVol.rlmtbrkCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定运行分断能力Ics(kA)" prop="rrunbrkCapacity">
                      <el-input v-model="device.lowVol.rrunbrkCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定短时耐受电流Icw(kA)" prop="rstCurrent">
                      <el-input v-model="device.lowVol.rstCurrent" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="分励脱扣器电压(V)" prop="shtTripVoltage">
                      <el-input v-model="device.lowVol.shtTripVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="电操机构电压(V)" prop="eoprVoltage">
                      <el-input v-model="device.lowVol.eoprVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="合闸电磁铁电压(V)" prop="clsemgntVoltage">
                      <el-input v-model="device.lowVol.clsemgntVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="智能控制器电压(V)" prop="ictrlVoltage">
                      <el-input v-model="device.lowVol.ictrlVoltage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 塑壳式低压断路器 -->
              <template v-else-if="device.baseInfo.typeId === 13">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定极限分断能力Icu(kA)" prop="rlmtbrkCapacity">
                      <el-input v-model="device.lowVol.rlmtbrkCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定运行分断能力Ics(kA)" prop="rrunbrkCapacity">
                      <el-input v-model="device.lowVol.rrunbrkCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="操作方式" prop="oprModel">
                      <el-select v-model="device.lowVol.oprModel" size="small">
                        <el-option
                          v-for="(v, i) in oprModels"
                          :key="i + 1"
                          :value="i + 1"
                          :label="v"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 微型断低压路器 -->
              <template v-else-if="device.baseInfo.typeId === 14">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="额定极限分断能力Icu(kA)" prop="rlmtbrkCapacity">
                      <el-input v-model="device.lowVol.rlmtbrkCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
              <!-- 低压电容器 -->
              <template v-else-if="device.baseInfo.typeId === 17">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="类别" prop="ecType">
                      <el-select v-model="device.lowVol.ecType" size="small">
                        <el-option v-for="(v, i) in ecTypes" :key="i + 1" :value="i + 1" :label="v"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定输出(kvar)" prop="rtiOutput">
                      <el-input v-model="device.lowVol.rtiOutput" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="电容容量(uF)" prop="ecCapacity">
                      <el-input v-model="device.lowVol.ecCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 低压电抗器 -->
              <template v-else-if="device.baseInfo.typeId === 18">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="适配电容(kvar)" prop="speCapacity">
                      <el-input v-model="device.lowVol.speCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="电抗率" prop="reactanceRatio">
                      <el-input v-model="device.lowVol.reactanceRatio" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item">
                    <el-form-item label="额定容量(kvar)" prop="rtiCapacity">
                      <el-input v-model="device.lowVol.rtiCapacity" size="small"></el-input>
                    </el-form-item>
                  </div>
                </div>
              </template>
              <!-- 低压接触器 -->
              <template v-else-if="device.baseInfo.typeId === 20">
                <div class="form-row">
                  <div class="row-item">
                    <el-form-item label="线圈电压(V)" prop="coilVoatage">
                      <el-input v-model="device.lowVol.coilVoatage" size="small"></el-input>
                    </el-form-item>
                  </div>
                  <spliter />
                  <div class="row-item"></div>
                  <spliter />
                  <div class="row-item"></div>
                </div>
              </template>
            </template>
          </template>
        </div>
        <div>
          <h3>基本信息</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="设备生产商" prop="makerName">
                <el-input v-model="device.baseInfo.makerName" size="small"></el-input>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="设备出厂时间" prop="leaveDate">
                <el-date-picker
                  v-model="device.baseInfo.leaveDate"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="设备出厂编号" prop="leaveCode">
                <el-input v-model="device.baseInfo.leaveCode" size="small"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div>
          <h3>项目信息</h3>
          <div class="form-row">
            <div class="row-item">
              <el-form-item label="产权单位" prop="clientId">
                <el-select v-model="device.baseInfo.clientId" size="small" @change="clientChange">
                  <el-option v-for="c in comList" :key="c.pkid" :value="c.pkid" :label="c.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="所属站点" prop="substationId">
                <el-select
                  v-model="device.baseInfo.substationId"
                  no-data-text="请先选择产权单位"
                  size="small"
                >
                  <el-option v-for="s in stations" :key="s.pkid" :value="s.pkid" :label="s.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <spliter />
            <div class="row-item">
              <el-form-item label="位置分布(柜号,间隔号;如: 1,2)" prop="locNumber">
                <el-input v-model="device.baseInfo.locNumber" size="small"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div>
          <h3>备注信息</h3>
          <div class="form-row">
            <div class="row-item">
              <!-- <el-form-item label="位置分布" prop="locNumber"> -->
              <el-input v-model="device.baseInfo.note" type="textarea" size="small"></el-input>
              <!-- </el-form-item> -->
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="danger" @click="submitForm">提交</el-button>
        <el-button @click="cancleDlg">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import CDlg from "@/components/CDlg";
import Spliter from "@/components/Spliter";
// import CSearch from "@/components/CSearch";
import { upload, getStations } from "@/api/user";
import { cloneDeep } from "lodash";
import {
  getTypes,
  getHighDevs,
  saveHighDev,
  getLowDevs,
  saveLowDev,
  deleteHighDev,
  deleteLowDev
} from "@/api/device";
import { calcPageNum } from "@/utils";
const newDev = {
  baseInfo: {
    envCondition: 1,

    insulateMedium: 1
  },
  highVol: {
    oVolType: "AC",
    pmVoltageType: "AC",
    installModel: 1
  },
  lowVol: {
    installModel: 1
  }
};
export default {
  name: "Devices",
  components: {
    CCard,
    CDlg,
    Spliter
    // CSearch
  },
  data() {
    return {
      loading: false,
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      devType: "高压系统",
      clientId: null,
      substationId: null,
      dialogVisible: false,
      devices: null,
      device: newDev,
      // select
      devTypes: ["高压系统", "低压系统"],
      types: null,
      envConditions: ["户内", "户外"],
      insulateMediums: ["真空", "SF6", "油浸", "环氧树脂"],
      installModels: ["固定式", "抽屉式", "小车式(低断无)", "手车式"],
      oprModels: ["手动", "电操[断路器-塑壳式]"],
      ecTypes: ["智能型", "普通型[电容器]"],
      stations: null,
      searchStations: null,
      rules: {
        // typeId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // dy: [{ required: true, message: "该字段不能为空", trigger: "blur" }],
        // 'baseInfo.modelCode': [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // envCondition: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // installModel: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // insulateMedium: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rFrequency: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // buCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // scdTime: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // oVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // pmVoltage: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // tsCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rstCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rrCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rOutput: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // aLevel: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // sthCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // rdwCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // racCurrent: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // makerName: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // leaveDate: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // leaveCode: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // clientId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // substationId: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ],
        // locNumber: [
        //   { required: true, message: "该字段不能为空", trigger: "blur" }
        // ]
      }
    };
  },
  computed: {
    comList() {
      return this.$store.getters.comList;
    },
    curTypes() {
      if (!(this.types instanceof Array)) return null;
      return this.types.find(e => e.twoType === this.devType).children;
    }
  },
  watch: {
    devType: {
      handler(v) {
        this._getDevices(v);
      }
    }
  },
  created() {
    getTypes().then(data => {
      this.types = data;
    });
    this._getStations();
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);
    this._getDevices();
  },
  methods: {
    _getDevices() {
      const substationId = this.substationId;
      const clientId = this.clientId;
      const params = {
        pageNo: this.page.index,
        pageSize: this.page.size,
        clientId,
        substationId
      };
      this.loading = true;
      if (this.devType === "高压系统") {
        return getHighDevs(params)
          .then(data => {
            this.devices = data.rows;
            this.$set(this.page, "total", data.total);
          })
          .catch(e => this.$message.error(e))
          .finally(() => (this.loading = false));
      } else {
        return getLowDevs(params)
          .then(data => {
            this.devices = data.rows;
            this.$set(this.page, "total", data.total);
          })
          .catch(e => this.$message.error(e))
          .finally(() => (this.loading = false));
      }
    },
    showEditDlg(row) {
      if (row.baseInfo.pkid !== this.curDevId) {
        this.device = cloneDeep(row);
        this.curDevId = row.baseInfo.pkid;
        if (this.devType === "高压系统") {
          const a = this.device.highVol.oVoltage.split(",");
          this.$set(this.device.highVol, "oVolType", a[0] || "");
          this.$set(this.device.highVol, "oVoltage1", a[1] || "");
          const b = this.device.highVol.pmVoltage.split(",");
          this.$set(this.device.highVol, "pmVoltageType", b[0] || "");
          this.$set(this.device.highVol, "pmVoltage1", b[1] || "");
        }
      }
      getStations(this.device.baseInfo.clientId).then(data => {
        this.stations = data;
      });
      this.dialogVisible = true;
    },
    showAddDlg() {
      if (this.device.baseInfo.pkid) {
        this.device = newDev;
        this.curDevId = null;
      }
      this.dialogVisible = true;
    },
    cancleDlg() {
      this.device = newDev;
      this.curDevId = null;
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.device.baseInfo.pkid &&
            (this.device.pkid = this.device.baseInfo.pkid);
          if (this.devType === "高压系统") {
            this.device.highVol.oVoltage =
              this.device.highVol.oVolType +
              "," +
              (this.device.highVol.oVoltage1 || "");
            this.device.highVol.pmVoltage =
              this.device.highVol.pmVoltageType +
              "," +
              (this.device.highVol.pmVoltage1 || "");
            return saveHighDev(this.device)
              .then(() => {
                this.$message.success("保存成功!");
                this.dialogVisible = false;
                this._getDevices();
                this.device = newDev;
                this.curDevId = null;
              })
              .catch(e => this.$message.error(e));
          } else {
            return saveLowDev(this.device)
              .then(res => {
                this.$message.success("保存成功!");
                this.dialogVisible = false;
                this._getDevices();
                this.device = newDev;
                this.curDevId = null;
              })
              .catch(e => this.$message.error(e));
          }
        }
      });
    },
    deleteDev(row) {
      return this.$confirm("是否继续删除设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (this.devType === "高压系统") {
          return deleteHighDev(row.baseInfo.pkid || row.highVol.pkid)
            .then(res => {
              this.$message.success("删除成功!");
              this._getDevices();
            })
            .catch(e => this.$message.error(e));
        } else {
          return deleteLowDev(row.baseInfo.pkid || row.lowVol.pkid)
            .then(res => {
              this.$message.success("删除成功!");
              this._getDevices();
            })
            .catch(e => this.$message.error(e));
        }
      });
    },
    upload(e) {
      upload(e)
        .then(url => {
          this.$set(this.device, "pictureUrl", url);
        })
        .catch(e => {
          console.log(e);
          this.$message.error("上传失败");
        });
    },
    clientChange(id) {
      this.$set(this.device.baseInfo, "substationId", null);
      getStations(id).then(data => {
        this.stations = data;
      });
    },
    _getStations(id) {
      this.substationId = null;
      getStations(id).then(data => (this.searchStations = data));
    },
    searchTypeChange() {
      this.$set(this.page, "index", 1);
      this._getDevices();
    },
    typeChange(typeId) {
      if (typeId <= 11 && !(this.device.highVol instanceof Object)) {
        this.$set(this.device, "highVol", {});
      }
      if (typeId > 11 && !(this.device.lowVol instanceof Object)) {
        this.$set(this.device, "lowVol", {});
      }
    }
  }
};
</script>

<style lang="scss">
.avatar-uploader {
  margin-right: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 200px;
  display: block;
}
</style>
